<template>
  <view>
    <my-search @click="goToSearchPage"></my-search>
    <!-- 轮播图区域 -->
    <swiper class="top-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item
        v-for="(item, index) in swiperList"
        :key="index"
        @click="goProductDetail(item)"
      >
        <image :src="item.imgUrl"></image>
      </swiper-item>
    </swiper>
    <!-- 通告栏 -->
    <uni-notice-bar speed="70px" background-color="pink" color="red" scrollable showIcon single :text="noticeMsg"></uni-notice-bar>
    <!-- 分类导航区域 -->
    <view class="nav-list">
      <view class="nav-item" v-for="(item, index) in navList" :key="index">
        <image
          :src="item.imgUrl"
          class="nav-img"
          @click="goToProductList(item)"
        ></image>
        <view>{{ item.text }}</view>
      </view>
    </view>
    <!-- 图片 -->
    <view>
      <img class="bigImg" :src="bigpic" @click="PicGoToProductList()" />
    </view>
    <!-- 富文本 -->
    <view class="bigText">
      <rich-text :nodes="bigText"></rich-text>
    </view>
    <!-- 商品组 -->
    <view
      class="content"
      v-for="(item, index) in goodsList"
      :key="index"
      @click="BottomGoProductDetail(item)"
    >
      <view class="pic">
        <image :src="item.goods_image"></image>
      </view>
      <view class="text">
        <view class="top">
          {{ item.goods_name }}
        </view>
        <view class="center">已售{{ item.goods_sales }}件</view>
        <view class="buttom">
          <text class="price">￥{{ item.goods_price_min }}</text>
          <text v-if="item.line_price_max !== '0.00'">
            <text class="del">￥{{ item.line_price_max }}</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mySearch from '@/components/my-search.vue'
export default {
  components: {
    mySearch,
  },
  data() {
    return {
      pageId: 0,
      swiperList: [], //轮播图数据
      noticeMsg: '', //通告栏数据
      navList: [], //导航栏
      bigpic: '', //图片
      bigText: '', //富文本
      goodsList: [], //商品列表
    }
  },
  created() {
    this.getList() //获取所有首页数据
  },
  methods: {
    goSearch() {
      uni.navigateTo({
        url: '/pages_sub1/search/search',
      })
    },
    async getList() {
      const res = await this.$http.get("/page/detail", this.pageId);
      console.log(res);
      this.swiperList = res.data.pageData.items[1].data;
      this.noticeMsg = res.data.pageData.items[2].params.text;
      this.navList = res.data.pageData.items[3].data;
      this.bigpic = res.data.pageData.items[4].data[0].imgUrl;
      this.bigText = res.data.pageData.items[5].params.content;
      this.goodsList = res.data.pageData.items[6].data;
    },
    //
    goToSearchPage() {
      console.log("点击跳转搜索页面...");
      uni.navigateTo({
        url: "/pages_sub1/search/search",
      });
    },
    // 去详情页
    goProductDetail(item) {
      uni.navigateTo({
        url:
          "/pages_sub1/product-detail/product-detail?goodsId=" +
          item.link.form[0].value,
      });
    },
    BottomGoProductDetail(item) {
      uni.navigateTo({
        url:
          "/pages_sub1/product-detail/product-detail?goodsId=" + item.goods_id,
      });
    },
    // 去列表页
    goToProductList(product) {
      console.log(product);
      if (product.text === "新品首发") {
        uni.navigateTo({
          url: "/pages_sub1/product-list/product-list",
        });
      }
    },
    PicGoToProductList() {
      uni.navigateTo({
        url: "/pages_sub1/product-list/product-list",
      });
    },
  },
}
</script>

<style lang="scss">
.top-swiper {
  height: 330rpx;

  .swiper-content,
  image {
    width: 100%;
    height: 100%;
  }
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 30rpx 0;
  text-align: center;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.bigImg {
  width: 100%;
}
.bigText {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
}
.content {
  width: 100%;
  height: 250rpx;
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  .pic {
    margin-right: 20rpx;
    image {
      width: 240rpx;
      height: 240rpx;
    }
  }
  .text {
    .top {
      width: 450rpx;
      height: 70rpx;
      // border: 1px solid blue;
      font-size: 26rpx;
      // white-space: nowrap;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .center {
      font-size: 24rpx;
      color: #999;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }
    .buttom {
      .price {
        font-size: 30rpx;
        color: #f03c3c;
        margin-right: 10rpx;
      }
      .del {
        font-size: 24rpx;
        text-decoration: line-through;
        color: #999;
      }
    }
  }
}
</style>
